<template>
    <el-container>
      <!--左边侧边栏-->
      <el-header>
       <div class="search" >
          <el-input placeholder="请输入内容" v-model="input2">
            <template slot="append">搜索</template>
          </el-input>
        </div>
      </el-header>

      <el-container>
        <el-aside  width="300px" style="background-color: rgb(242, 243, 245);">
          <el-menu>
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-menu"></i>审批阶段</template>
              <el-menu-item-group v-for="(item,index) in kxxyj" :key = "index">
                <el-menu-item :index = '"1-"+item.no' class="aside-font" @click = "locationDiv('kxxyj' + item.no)">{{item.value}}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
          <el-menu>
            <el-submenu index="2">
              <template slot="title"><i class="el-icon-menu"></i>招投标阶段</template>
              <el-menu-item-group v-for="(item,index) in zbsj" :key = "index">
                <el-menu-item :index = '"2-"+index' class="aside-font" @click = "locationDiv('kxxyj' + item.no)">{{item.value}}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
          <el-menu>
            <el-submenu index="3">
              <template slot="title"><i class="el-icon-menu"></i>施工阶段</template>
              <el-menu-item-group v-for="(item,index) in jszb" :key = "index">
                <el-menu-item :index = '"2-"+index' class="aside-font" @click = "locationDiv('kxxyj' + item.no)">{{item.value}}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
          <el-menu>
            <el-submenu index="4">
              <template slot="title"><i class="el-icon-menu"></i>竣工阶段</template>
              <el-menu-item-group v-for="(item,index) in xmss" :key = "index">
                <el-menu-item class="aside-font" :index = '"2-"+index' @click = "locationDiv('kxxyj' + item.no)">{{item.value}}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main style="margin-top :20px;">
          <div class="title-1">XXX项目</div>
          <div class="title_date">xz00001</div>
          <div>
            <el-upload class="upload-demo" ref="upload" :file-list="uploadFiles"  action="" :http-request = "loadJsonFromFile">
              <el-button type="primary" round >传入json文件</el-button>
            </el-upload>
          </div>
          <div class="d_cls">
            <div class="d_left">
              <div class="d_bg">
                <!--表格1-->
                <div style="width: 100%;">
                  <el-descriptions class="margin-top" title="基本信息" :column="3" size="medium" border>
                    <el-descriptions-item>
                      <template slot="label">
                        年度
                      </template>
                      2021
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        项目代码
                      </template>
                      XYS_8888888
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        项目类型
                      </template>
                      新建项目
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        项目单位
                      </template>
                      <!-- 市财政局 -->
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        主管单位
                      </template>
                      市财政局
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        资金来源
                      </template>
                      市财政局
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        征迁主体
                      </template>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        已拨付
                      </template>
                      <!-- 200万元 -->
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        项目详情
                      </template>
                      <!-- 落实“无申请兑现”改革，襄阳市财政局聚焦“高效办成一件事”，主动联合市市场监管局、市科技局、市经信局、市审计局等部门，对涉及到财政部门的改革事项，以市场主体需求为导向，... -->
                    </el-descriptions-item>
                  </el-descriptions>
                </div>
                <!--表格2-->
                <!-- <div style="width: 28%">
                  <el-descriptions class="margin-top" title="投资估算及概算" :column="1" size="middle" border>
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-user"></i>
                        总投资
                      </template>
                      1000万元
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        工程费用
                      </template>
                      800万元
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-location-outline"></i>
                        征迁及其他费用
                      </template>
                      200万元
                    </el-descriptions-item>
                  </el-descriptions>
                </div> -->
              </div>

              <!--表格（json）-->
              <div style="margin-top: 20px;" v-for="(item,indx) in tableData" :key = "indx" :id="'kxxyj' + indx">
                <span  class="font_css"> {{item.title}} </span>
                <!--label为空-->
                <div v-for="(itemD,index) in item.dataWarning">
                  <span class="warning-cls" v-if="itemD.warningNumber != 0" @click = "dataWarnDetail(itemD)">数据预警：{{itemD.warningNumber}} 个 数据预警提示：{{itemD.warningTitle}} </span>
                </div>

                <div v-for="(itemA,index) in item.attachWarning">
                  <span></span>
                  <span class="warning-cls" v-if="itemA.warningNumber != 0" @click = "dataWarnDetail(itemA)">附件预警：{{itemA.warningNumber}} 个 附件预警提示：{{itemA.warningTitle}} </span>
                </div>

                  <div v-if="item.title == '发改委招标核准意见' || item.title == '招标组织形式' || item.title == '招标方式'" class = "table-cls">
                    <zb-bg>

                    </zb-bg>
                  </div>
                  <div v-else>
                    <el-table :data = "item.tableData" border class="table-cls"  @row-click="(row,column,e)=>rowClickOne(row,column,e,tableData,indx)" max-height = "250px"
                      :cell-class-name="
                        ({ row, column, rowIndex, columnIndex }) => (
                          (row.index = rowIndex), (column.index = columnIndex)
                        )
                      ">
                     
                      <div v-if="item.config != []">
                        <el-table-column   v-for="(itemL,index) in item.config"  :label = "itemL.label" :prop = "itemL.props" >
                          <!-- <template slot-scope="scope" >
                              <span
                                v-if="
                                  scope.row.index === tableCellClickRowIndex &&
                                  scope.column.index === tableCellClickColumnIndex
                                "
                                >
    
                                <span v-if="(indx === 4 && scope.column.index === 2) || (indx === 5 && scope.column.index === 2)">
    
                                  <el-date-picker
                                    v-model="itemL.content"
                                    type="date"
                                    placeholder="选择日期"
                                    size="mini"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd">
                                  </el-date-picker>
    
                                </span>
                                <span v-else>
                                  <el-input
                                      placeholder="请输入内容…"
                                      @blur="tableCellInputBlur"
                                      size="mini"
                                      v-model="itemL.content"
                                      autofocus
                                    />
                                </span>
                              </span>
                              <span v-else>{{ itemL.content }}</span>
                          </template> -->
                          <template v-if="itemL.children">
                            <el-table-column v-for="(child, index) in itemL.children"
                              :key="index"
                              :label="child.label"
                              :prop="child.prop">
                            </el-table-column>
                          </template>
    
                        </el-table-column>
                      </div>
    
    
                        <el-table-column label = "上传资料" v-if="item.upload != null" >
                          <el-button type = "primary" size = "mini" plain @click = "uploadTitle(item)">
                            上传资料
                          </el-button>
                        </el-table-column>
    
                        <!-- <el-table-column label = "责任单位" v-if="item.unit != null" width="150">
                          <template slot-scope="scope" >
                              <span
                                v-if="
                                  scope.row.index === tableCellClickRowIndex &&
                                  scope.column.index === tableCellClickColumnIndex"
                              >
                                <el-input
                                  placeholder="请输入内容…"
                                  @blur="tableCellInputBlur"
                                  size="mini"
                                  v-model="item.unit"
                                  autofocus
                                />
                              </span>
                              <span v-else>{{ item.unit }}</span>
    
                          </template>
                        </el-table-column> -->
                        <!-- <el-table-column label = "预警" >
                          <template v-if="item.warningFlag == 1">
                            <div style="display: flex;">
                              <div style="width: 20px; height: 20px; background-color: red;"></div>
                              <div style="margin-left: 10px; color: red;">
                                <span>{{ item.tips }}</span>
                              </div>
                            </div>
                          </template>
                          <template v-if="item.warningFlag == 0">
                            <div style="width: 20px; height: 20px; background-color: green;"></div>
                          </template>
                        </el-table-column> -->
                      </el-table>
                  </div>
                  
              </div>
            </div>

            <div class="d_right">
              <div>
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>报告管理</span>
                  </div>
                  <div style="float: left;">
                    <div class="text item">
                      <router-link to="/welcome"><el-button type="primary" plain size="middle">征询意见稿管理</el-button></router-link>
                    </div>
                    <div class="text item">
                      <router-link to="/welcome"><el-button type="primary" plain size="middle">审计意见管理</el-button></router-link>
                    </div>
                    <div class="text item">
                      <router-link to="/welcome"><el-button type="primary" plain size="middle">审计报告管理</el-button></router-link>
                    </div>
                  </div>
                </el-card>
              </div>

              <div style="margin-top: 30px;">
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>项目管理</span>
                  </div>
                  <div style="float: left;">
                    <div class="text item">
                      <router-link to="/welcome"><el-button type="primary" plain size="middle">招投标资料管理</el-button></router-link>
                    </div>
                    <div class="text item">
                      <router-link to="/welcome"><el-button type="primary" plain size="middle">合同资料管理</el-button></router-link>
                    </div>
                    <div class="text item">
                      <router-link to="/welcome"><el-button type="primary" plain size="middle">资金资料管理</el-button></router-link>
                    </div>
                    <div class="text item">
                      <router-link to="/welcome"><el-button type="primary" plain size="middle">项目实施资料管理</el-button></router-link>
                    </div>
                  </div>
                </el-card>
              </div>

              <div style="margin-top: 30px;">
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>功能</span>
                  </div>
                  <div style="float: left;">
                    <div class="text item">
                      <el-button type="primary" plain size="middle" > <a @click="download2">资料打包下载</a></el-button>
                    </div>
                    <div class="text item">
                      <router-link to="/xmjk"><el-button type="primary" plain size="middle">项目监控</el-button></router-link>
                    </div>
                  </div>
                </el-card>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import importExcel from '@/components/import/index.vue';
  import zbBg from '@/components/zbbg/index.vue';

  export default {

    components: {
      importExcel,
      zbBg
    },

    data() {
      return {
        value1: "",
        url : process.env.VUE_APP_BASE_API + "common/uploadFile",
        tableCellClickRowIndex: null, // 点击的单元格行索引
        tableCellClickColumnIndex: null, // 点击的单元格列索引
        uploadFilename: null,
        uploadFiles: [],
        activeIndex: "1",
        activeIndex2: "1",
        input2: "",
        search: "",
        active: "",
        model: {},
        label: "",
        warningFlag: "",   //1为红色 0为绿色
        warningTitle: "",

        jsxk: [{
            no: 1,
            value: "建设用地规划许可"
          },
          {
            no: 2,
            value: "建设工程规划许可"
          }
        ],
        title: [{
            no: 1,
            value: "选址意见书"
          },
          {
            no: 2,
            value: "用地预审"
          },
          {
            no: 3,
            value: "节能审查"
          },
          {
            no: 4,
            value: "航道通航条件影响评价"
          },
          {
            no: 5,
            value: "环境影响评价"
          },
          {
            no: 6,
            value: "可行性研究报告审批"
          },
        ],

        kxxyj: [{
            no: 0,
            value: "项目建议书"
          },
          {
            no: 1,
            value: "可行性研究报告"
          },
          {
            no: 2,
            value: "建设项目选址意见书"
          },
          {
            no: 3,
            value: "用地预审"
          },
          {
            no: 4,
            value: "节能评估及审查"
          },
          {
            no: 5,
            value: "环境影响评价报告"
          },
          {
            no: 6,
            value: "通航影响评价意见"
          },
          {
            no: 7,
            value: "初步设计"
          },
          {
            no: 8,
            value: "建设用地规划许可证"
          },
          {
            no: 9,
            value: "不动产权证"
          },
          {
            no: 10,
            value: "水土保持方案审批"
          },
          {
            no: 11,
            value: "施工图设计文件审查合格书"
          },
          {
            no: 12,
            value: "消防设计审查意见书"
          },
          {
            no: 13,
            value: "建设工程规划许可证"
          },
          {
            no: 14,
            value: "施工许可证"
          }
        ],
        zbsj: [{
          no: 15,
          value: "发改委投标核准意见"
        },
        {
          no: 16,
          value: "招标组织形式"
        },
        {
          no: 17,
          value: "招标方式"
        },
        {
          no: 18,
          value: "预算评审"
        },
        {
          no: 19,
          value: "招标备案表"
        },
        {
          no: 20,
          value: "招标公告、招标文件"
        },
        {
          no: 21,
          value: "投标资料"
        },
        {
          no: 22,
          value: "专家选定资料"
        },
        {
          no: 23,
          value: "评标过程资料"
        },
        {
          no: 24,
          value: "评标报告"
        },
        {
          no: 25,
          value: "评标公示文件"
        },
        {
          no: 26,
          value: "中标通知书"
        },
        {
          no: 27,
          value: "施工合同"
        },
        {
          no: 28,
          value: "安全、质量监督备案"
        }]
        ,
        jszb: [{
            no: 29,
            value: "开工报告"
          },
          {
            no: 30,
            value: "分包管理"
          },
          {
            no: 31,
            value: "人员情况"
          },
          {
            no: 32,
            value: "安全管理、质量管理"
          }
        ],
        xmss: [{
            no: 33,
            value: "工期管理"
          },
          {
            no: 34,
            value: "安全质量监督报告"
          },
          {
            no: 35,
            value: "环保验收"
          },
          {
            no: 36,
            value: "项目竣工结算审核报告"
          },
          {
            no: 37,
            value: "项目指标分析"
          }
        ],

        xzyjs: [{
          shjg: "343354",
          pfsj: "344",
          zsbh: "eweweS",
          sjyj: "数据未上传、资料未上传",
          sjyjsj: "2020-12-13"
        }],
        ztb: [{
          jd: "设计",
          fbzbsj: "",
          kbsj: "",
          zbtzssj: "",
          htqdsj: "",
          dwmc: "湖北汉江信融大数据征信有限公司",
          zbje: "200万元",
          sjyj: "数据未上传、资料未上传",
          sjyjsj: "2020-12-30"
        }],
        tableData: [],
        upload:[],
        warningData: [],
        content: []
      }
    },
    mounted () {
        this.$nextTick(function () {
          console.log("mounted钩子已运行--------")

          // 仅在整个视图都被渲染之后才会运行的代码
          // this.$http.post(process.env.VUE_APP_BASE_API + 'common/uploadFile',{
          //   flag: "1"
          // }).then(res =>{
          //   res = JSON.parse(res.body.msg)
          //   console.log(res.postData)
          //   this.tableData = res.postData
          // })
        })
      },
    methods: {

      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },

      locationDiv(res) {
        document.getElementById(res).scrollIntoView();
      },

      dataWarnDetail(itemD){

        const h = this.$createElement;
        this.$msgbox({
          title: '数据预警详情',
          message: 
            h('div',null, [
              h('p',null, '预警口径：' + itemD.warningKJ),
              h('p',{ style: 'color: red' }, '预警数目：' + itemD.warningNumber + '个'),
              h('p',{ style: 'color: red' }, '预警提示：' + itemD.warningTitle),
              h('p',null, '预警明细：' + itemD.warningDetail)
            ]),

            showCancelButton: false,
            confirmButtonText: '确定'
        })
  
      },


      loadJsonFromFile: function(item) {
        this.mode = item.file

        let fd = new FormData()
        fd.append('file', this.mode)
        this.$http.post( process.env.VUE_APP_BASE_API + 'common/uploadFile', fd, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(res => {
          //转为对象
          res = JSON.parse(res.body.msg)
          console.log(res.postData)
          this.tableData = res.postData
          this.label = res.label

          let a = [];
          for (let i = 0; i < this.tableData.length; i ++) {
            let b = [];
            for (let j = 0; j < this.tableData[i].body.length; j ++) {
              b[j] = this.tableData[i].body[j].content
            }
            a[i] = b;
          }
          //将content存入预警数据（二维数组）
          this.warningData = a;

        })
      },


      skipKxxyj(no) {
        document.getElementById("kxxyj" + no).scrollIntoView({
          behavior: "smooth"
        });
      },

      skipZbsj(id) {
        document.getElementById(id).scrollIntoView({
          behavior: "smooth"
        });
      },

      skipJszb(no) {

        if (no == "3") {
          console.log("no --------------" + no)
          document.getElementById("sgtsc").scrollIntoView({
            behavior: "smooth"
          })
        } else if (no == "4") {
          console.log("no --------------" + no)
          document.getElementById("czps").scrollIntoView({
            behavior: "smooth"
          })
        } else if (no == "5") {
          console.log("no --------------" + no)
          document.getElementById("ztb").scrollIntoView({
            behavior: "smooth"
          })
        } else {
          console.log("no --------------" + no)
          document.getElementById("jsxk" + no).scrollIntoView({
            behavior: "smooth"
          })
        }
      },

      skipXmss(no) {
        if (no == "1") {
          document.getElementById("sgxkz").scrollIntoView({
            behavior: "smooth"
          })
        } else if (no == "2") {
          document.getElementById("kgsqbg").scrollIntoView({
            behavior: "smooth"
          })
        } else if (no == "3") {
          document.getElementById("kgl").scrollIntoView({
            behavior: "smooth"
          })
        } else {
          document.getElementById("xxjd").scrollIntoView({
            behavior: "smooth"
          })
        }
      },

      skipJgys() {
        document.getElementById("jgys").scrollIntoView({
          behavior: "smooth"
        })
      },

      skipJsshqk() {
        document.getElementById("jsshqk").scrollIntoView({
          behavior: "smooth"
        })
      },
      download1() {
        alert("基本资料打包下载中...");
        //删除之前存入文件夹的文件
        this.$http.post(process.env.VUE_APP_BASE_API + "/common/delete", {
          sPath:   "襄阳市疾病预防控制中心迁建项目"
        }).then(res => {
          console.log(res)
          //重新下载文件
          this.$http.get(process.env.VUE_APP_BASE_API + "/common/compress", {
            params: {
              str: "sjb"
            }
          }).then(res => {
            this.download(res.body.msg)
          })
        })
      },
      download2() {
        alert("资料打包下载中...")
        //删除之前存入文件夹的文件
        this.$http.post(process.env.VUE_APP_BASE_API + "/common/delete", {
          sPath: "襄阳市疾病预防控制中心迁建项目"
        }).then(res => {
          //重新下载
          this.$http.get(process.env.VUE_APP_BASE_API + "/common/compress", {
            params: {
              str: "fjzl"
            }
          }).then(res => {

            console.log(res)

            this.download(res.body.msg)
          })
        })
      },
      mouseOver(){
        this.active = " color:black;"
      },
      mouseLeave(){
        this.active = "color: white;"
      },
      mouseOver1(){
        this.active1 = " color: black;"
      },
      mouseLeave1(){
        this.active1 = "color: white;"
      },
      mouseOverx(){
        this.activex = "color: white;"

      },

      activexClick(){
        this.showactive  = true
      },

      async logout() {
        this.$store.dispatch('LogOut').then(() => {
          this.$router.push('/login')
        })
      },
       // 点击表格可以编辑（点击事件）
       rowClickOne(row, column, e, tableData, indx) {
        this.tableCellClickRowIndex = row.index;
        this.tableCellClickColumnIndex = column.index;
        //tableData[indx].body[column.index].content
        if(indx == 1 && column.index == 2){
          console.log( "----内容----" + JSON.stringify(tableData[indx].body[column.index].content))
          if(tableData[indx].body[column.index].content <  tableData[7].body[2].content){
            tableData[indx].warningFlag = "1"
            tableData[indx].tips = "投资估算小于投资概算！"
          }
          else{
            tableData[indx].warningFlag = "0"
          }
        }

        if(indx == 7 && column.index == 2){
          console.log( "----内容----" + JSON.stringify(tableData[indx].body[column.index].content))
          if(tableData[indx].body[column.index].content >  tableData[1].body[2].content){
            tableData[indx].warningFlag = "1"
            tableData[indx].tips = "投资概算大于投资估算！"
          }
          else{
            tableData[indx].warningFlag = "0"
          }
        }

        if(indx == 1 && column.index == 2){
          console.log( "----内容----" + JSON.stringify(tableData[indx].body[column.index].content))
          if(tableData[indx].body[column.index].content <  tableData[7].body[2].content){
            tableData[indx].warningFlag = "1"
            tableData[indx].tips = "投资估算小于投资概算！"
          }
          else{
            tableData[indx].warningFlag = "0"
          }
        }

        if(indx == 4 && column.index == 2){
          var a = JSON.stringify(tableData[indx].body[column.index].content).substring(0,11);
          console.log("a------" +a);
          var b = JSON.stringify(tableData[5].body[2].content).substring(0,11);
          console.log("b------" +b);
          var startDate = new Date(a);
          var endDate = new Date(b);

          if( startDate > endDate){
            tableData[indx].warningFlag = "1"
            tableData[indx].tips = "节能评价及评估批复时间大于环境影响评价报告批复时间！"
          }
          else{
            tableData[indx].warningFlag = "0"
          }
        }

        if(indx == 5 && column.index == 2){
          a = JSON.stringify(tableData[indx].body[column.index].content).substring(0,11);
          b = JSON.stringify(tableData[4].body[2].content).substring(0,11);

          var startDate = new Date(a)
          var endDate = new Date(b)

          if( startDate < endDate){
            tableData[indx].warningFlag = "1"
            tableData[indx].tips = "环境影响评价报告批复时间小于节能评价及评估批复时间！"
          }
          else{
            tableData[indx].warningFlag = "0"
          }
        }
      },

      // 单元格失去焦点
      tableCellInputBlur(row, event, column) {
        this.tableCellClickRowIndex = null;
        this.tableCellClickColumnIndex = null;
      },

      uploadTitle(item){
        this.$confirm('请上传' + item.upload + '！', '上传资料', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'

        }).then(() =>{
          item.warningFlag = "0"
          this.$message({
            type: 'success',
            message: '上传成功!'
          })
        }).catch(() =>{
          item.warningFlag = "1"
          this.$message({
            type: 'info',
            message: '取消成功!'
          })
        })
      }
    }
  }
  
</script>

<style lang="scss" scoped>

.search{
  width: 300px;
  float: right;
  margin: 20px;
}
  .link:hover {
    cursor: pointer;
  }

  .el-container {
    height: 200vh;
  }

  .title {
    padding: 10px;
    height: 100px;
    background-image: url(../../../assets/image/sjpic2.jpg);
    background-size: 100% 100%;
    background-color: rgb(76, 170, 250);
    margin-right: 20px;
    z-index: 100000;
  }

  .title-left {
    font-size: 40px;
    font-weight: bold;
    color: white;
    text-align: left;
    margin-left: 90px;
    font-family: 华光黑变_CNKI;
    padding-top: 16px;
    padding-bottom: 18px;
    opacity:1;
  }

  .title-right {
    /*text-align: right;*/
    padding-top: 60px;
    color: white;
    cursor: pointer;
  }


  .submenu_title {
    font-size: 20px;
  }

  .el-menu-item {
    font-size: 20px;
  }

  .el-menu-item-last {
    float: right;
  }

  .el-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .title-1 {
    display: flex;
    justify-content: center;
    /* margin-top: 80px; */
    font-size: 30px;
    font-weight: 600;
  }
  .el-container{
    height: 100vh;
  }

  .title_date {
    float: right;
    margin-right: 20%;
    font-size: 14px;
    margin-top: 10px;
    color: gray;
  }

  .d_cls {
    margin-top: 60px;
    display: flex;
    justify-content: space-around;
  }

  .d_left {
    width: 80%;
  }

  .d_bg {
    display: flex;
    justify-content: space-around;
  }

  .d_right {
    width: 20%;
  }

  .el-dropdown {
    vertical-align: top;
  }

  .el-dropdown+.el-dropdown {
    margin-left: 15px;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  .d_xlk {
    padding-bottom: 30px;
    padding-top: 5px;
    display: flex;
    justify-content: space-around;
  }

  .font_css {
    font-size: 18px;
    font-weight: 600;
  }

  /* -----卡片---------*/
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
    display: flex;
    justify-content: center;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 90%;
    margin-left: 30px;
  }

  .skip {
    border: none;
    outline: none;
    background-color: transparent;

  }

.v-field {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0 10px;
    box-shadow: 1px 1px 20px rgba(0,0,0,.15);
    box-sizing: border-box;
    background-color: #FFF;
    background-image: none;
    border: 1px solid #DCDFE6;
    display: inline-block;
    outline: 0;
  }

  .td-field:focus {
    border-color: #5FB878!important
  }

  .aside-font{
    font-size: 15px;
  }

  .dropdown {
    position: relative;
    display: inline-block;
  }
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: rgb(76, 170, 250);
    min-width: 100px;
    text-align: center;
    color: white;
    border-radius: 5px;
    margin-top: 10px;
  }

  .dropdown-content:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: 30px;
    top: -10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid rgb(76, 170, 250);
  }
  .dropdown:hover .dropdown-content {
    display: block;
  }
  .maptext:hover {
      color: black;
    }

    .dropdown-content-li {
      line-height: 36px;
      padding: 0 20px;
      font-size: 14px;
    }
    .fhsy:hover{
      color: black;
    
    }
    .dt:hover{
      color: black;
    
    }

    .table-cls{
      width: 100%;
      margin-bottom: 20px;
      margin-top: 10px;
    }

    .warning-cls{
      margin-top: 50px;
      font-size: 13px;
      color: red;
      font-weight: 700;
    }
</style>
